<template>
  <div
    class="news-item center"
    :style="{ backgroundImage: 'url(' + item.pic + ')' }"
  >
    <p>{{ item.descript }}</p>
    <p>{{ item.title }}</p>
    <span class="center">查看详情</span>
  </div>
</template>
<script>
export default {
  props: {
    item: Object,
  },
};
</script>
<style lang="scss">
.news-item {
  width: 100%;
  height: 185px;
  //   background-image: url("../");
  background-size: 100% 100%;
  margin-bottom: 10px;
  flex-direction: column;
  color: #fff;
  font-size: 14px;
  text-align: center;
  p {
    width: 300px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  p:nth-child(1) {
    font-size: 18px;
  }
  span {
    width: 80px;
    height: 28px;
    border-radius: 14px;
    border: 1px solid #fff;
  }
}
</style>
